<template>
  <div>
    <div>
      <Nav></Nav>
      <v-title>游戏商城管理</v-title>
    </div>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>游戏商城管理</h2>
      </el-col>
    </el-row>
    <br />
    <div class="search">
      <el-input v-model="name" placeholder="请输入关键字" />&nbsp;&nbsp;
      <button type="button" class="el-button el-button--primary is-round" @click="getGameGoodsList">
        <span>查询</span>
      </button>
      <button type="button" class="el-button el-button--danger is-round" @click="add">
        <span>添加商品</span>
      </button>
    </div>
    <br /><br />
    <el-row class="game-list">
      <div v-if="Object.keys(gameGoodsList).length > 0">
        <div>
          <div v-for="(gameGoods, key) in gameGoodsList" v-bind:key="key">
            <el-card class="box-card">
              <div class="text item">
                <el-row>
                  <el-col :span="6"><img :src="gameGoods.mainPicUrl" width="250" height="192" /></el-col>
                  <el-col :span="14" :offset="4">
                    <el-row>
                      <span class="gameGoodsName">{{gameGoods.name}}</span>
                    </el-row>
                    <br />
                    <el-row>
                      <el-col :span="4">
                        <span class="detailContent">价格</span>
                      </el-col>
                      <el-col :span="6">
                        <span class="detailContentPrice">￥{{ gameGoods.price }}</span>
                      </el-col>
                    </el-row>
                    <br />
                    <el-row>
                      <el-col :span="4">
                        <span class="detailContent">库存</span>
                      </el-col>
                      <el-col :span="6">
                        <span class="detailContentNum">{{ gameGoods.num }}</span>
                      </el-col>
                    </el-row>
                    <br />
                    <el-row>
                      <el-col :span="4">
                        <span class="detailContent">上架状态</span>
                      </el-col>
                      <el-col :span="6">
                        <span class="onSale" v-if="gameGoods.isEnabled">已上架</span>
                        <span class="detailContentPrice" v-if="!gameGoods.isEnabled">已下架</span>
                      </el-col>
                    </el-row>
                    <br />
                    <el-row>
                      <el-col :span="6">
                        <el-button type="primary" round @click="detail(gameGoods.id)">查看详情</el-button>
                      </el-col>
                      <el-col :span="6" :offset="1">
                        <el-button type="danger" round @click="update(gameGoods.id)">编辑商品</el-button>
                      </el-col>
                    </el-row>
                    <br />

                  </el-col>
                </el-row>
              </div>
            </el-card>
            <br /><br />
          </div>
        </div>
        <el-backtop />
        <el-divider>亲~已经看到底了吖~</el-divider>
      </div>
      <div v-if="Object.keys(gameGoodsList).length == 0">
        <el-result title="目前没有相关游戏商品" subTitle="请赶紧添加游戏商品吧~">
          <template slot="icon">
            <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px" />
          </template>
        </el-result>
      </div>
    </el-row>
    <br />

    <el-dialog title="商品详情" :visible.sync="dialogGoodsDetailVisible">
      <el-descriptions title="">
        <el-descriptions-item label="商品名">{{gameGoodsDetail.name}}</el-descriptions-item>
        <el-descriptions-item label="开发商">{{gameGoodsDetail.developCompany}}</el-descriptions-item>
        <el-descriptions-item label="库存"><span class="detailContentNum">{{gameGoodsDetail.num}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="价格"><span class="detailContentPrice">￥{{gameGoodsDetail.price}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="上架状态">
          <span class="onSale" v-if="gameGoodsDetail.isEnabled">已上架</span>
          <span class="detailContentPrice" v-if="!gameGoodsDetail.isEnabled">已下架</span>
        </el-descriptions-item>
        <el-descriptions-item label="标签">
          <span v-for="(oneTag, key) in gameGoodsDetail.tag" v-bind:key="key">
            <el-tag size="small">{{oneTag}}</el-tag>&nbsp;
          </span>
        </el-descriptions-item>
      </el-descriptions>
      <el-row>
        <el-col :md="6">
          主图片
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="18" :offset="6">
          <el-image v-if="gameGoodsDetail.mainPicUrl" :src="gameGoodsDetail.mainPicUrl"
            style="width:300px;height:300px" />
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="6">
          说明图片
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="18" :offset="6">
          <span v-for="(pic, key) in gameGoodsDetail.picUrl" v-bind:key="key">
            <el-image :src="pic" style="width:300px;height:300px" />
            <br/>
          </span>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="6">内容介绍：</el-col>
        <el-col :md="18">{{gameGoodsDetail.content}}</el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="6">商品创建时间：</el-col>
        <el-col :md="18">{{gameGoodsDetail.createTime}}</el-col>
      </el-row>
      <br />
      <el-row v-if="gameGoodsDetail.updateTime != null">
        <el-col :md="6">最近一次修改时间：</el-col>
        <el-col :md="18">{{gameGoodsDetail.updateTime}}</el-col>
      </el-row>
    </el-dialog>

    <el-dialog title="修改商品详情" :visible.sync="dialogUpdateGoodsVisible">
      <el-form ref="form" :model="updateGameGoods" label-width="80px">
        <el-form-item label="商品名">
          <el-input v-model="updateGameGoods.name" placeholder="请输入商品名" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="开发商">
          <el-input v-model="updateGameGoods.developCompany" placeholder="请输入开发商" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="updateGameGoods.price" placeholder="请输入价格" style="width:20%"
            onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')"
            oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="updateGameGoods.num" placeholder="请输入库存" style="width:20%"
            onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')"
            oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-radio-group v-model="updateGameGoods.isEnabled">
            <el-radio :label=true>上架</el-radio>
            <el-radio :label=false>下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标签">
          <span v-for="tag in updateGameGoods.tag">
            <el-tag closable :disable-transitions="false" @close="handleTagClose(tag)">
              {{tag}}
            </el-tag>&nbsp;
          </span>
          <el-input class="input-new-tag" v-if="inputVisibleTag" v-model="inputValueTag" ref="saveTagInputTag"
            size="small" @keyup.enter.native="handleInputConfirmTag" @blur="handleInputConfirmTag">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInputTag">+ 加标签</el-button>
        </el-form-item>
        <el-form-item label="内容介绍">
          <el-input type="textarea" v-model="updateGameGoods.content" placeholder="请输入内容介绍" style="width:90%">
          </el-input>
        </el-form-item>
        <el-form-item label="主图片">
          <el-input v-model="updateGameGoods.mainPicUrl" placeholder="请输入主图片链接" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="说明图片">
          <span v-for="(img, index) in updateGameGoods.picUrl">
            <el-input v-model="updateGameGoods.picUrl[index]" placeholder="请输入说明图片链接"
              style="width:90%;margin-top: 10px;" />
            &nbsp;
            <el-link type="info" @click="deletePicUrl(index)" style="font-size: 18px;"
              v-if="updateGameGoods.picUrl.length > 1">删除</el-link>
            <br />
          </span>
          <br />
          <span>
            <el-button type="primary" @click="addPicUrl">添加说明图片</el-button>
          </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateSubmit">修改商品信息</el-button>
          <el-button @click="resetUpdate(updateGameGoods.id)">重置</el-button>
        </el-form-item>
      </el-form>

      <br />
    </el-dialog>

    <el-dialog title="添加商品" :visible.sync="dialogAddGoodsVisible">
      <el-form ref="form" :model="addGameGoods" label-width="80px">
        <el-form-item label="商品名">
          <el-input v-model="addGameGoods.name" placeholder="请输入商品名" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="开发商">
          <el-input v-model="addGameGoods.developCompany" placeholder="请输入开发商" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addGameGoods.price" placeholder="请输入价格" style="width:20%"
            onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')"
            oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="addGameGoods.num" placeholder="请输入库存" style="width:20%"
            onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')"
            oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-radio-group v-model="addGameGoods.isEnabled">
            <el-radio :label=true>上架</el-radio>
            <el-radio :label=false>下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标签">
          <span v-for="tag in addGameGoods.tag">
            <el-tag closable :disable-transitions="false" @close="handleTagCloseAdd(tag)">
              {{tag}}
            </el-tag>&nbsp;
          </span>
          <el-input class="input-new-tag" v-if="inputVisibleTag" v-model="inputValueTag" ref="saveTagInputTag"
            size="small" @keyup.enter.native="handleInputConfirmTagAdd" @blur="handleInputConfirmTagAdd">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInputTag">+ 加标签</el-button>
        </el-form-item>
        <el-form-item label="内容介绍">
          <el-input type="textarea" v-model="addGameGoods.content" placeholder="请输入内容介绍" style="width:90%">
          </el-input>
        </el-form-item>
        <el-form-item label="主图片">
          <el-input v-model="addGameGoods.mainPicUrl" placeholder="请输入主图片链接" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="说明图片">
          <span v-for="(img, index) in addGameGoods.picUrl">
            <el-input v-model="addGameGoods.picUrl[index]" placeholder="请输入说明图片链接"
              style="width:90%;margin-top: 10px;" />
            &nbsp;
            <el-link type="info" @click="deletePicUrlAdd(index)" style="font-size: 18px;"
              v-if="addGameGoods.picUrl.length > 1">删除</el-link>
            <br />
          </span>

          <br />
          <span>
            <el-button type="primary" @click="addPicUrlAdd">添加说明图片</el-button>
          </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSubmit">添加商品</el-button>
          <el-button @click="resetAdd()">重置</el-button>
        </el-form-item>
      </el-form>

      <br />
    </el-dialog>
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getGameGoodsListAdmin, getGameGoodsDetailAdmin, updateGameGoods, addGameGoods } from "@/api/index";
export default {
  name: "",
  created() {
    this.getGameGoodsList();
  },
  components: {
    Nav,
    VTitle,
  },
  data() {
    return {
      name: "",
      gameGoodsList: [],
      gameGoodsDetail: {},
      dialogGoodsDetailVisible: false,
      updateGameGoods: {},
      dialogUpdateGoodsVisible: false,
      inputVisibleTag: false,
      inputValueTag: '',
      //tempUpdateGameGoods: {},
      addGameGoods: {
        "content": "",
        "developCompany": "",
        "isEnabled": true,
        "mainPicUrl": "",
        "name": "",
        "num": 0,
        "picUrl": [''],
        "price": "0",
        "tag": []
      },
      dialogAddGoodsVisible: false,
    };
  },
  methods: {
    async getGameGoodsList() {
      let that = this;
      that.gameGoodsList = [];
      await getGameGoodsListAdmin(that.name).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.gameGoodsList = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async detail(goodsId) {
      this.gameGoodsDetail = {}
      let that = this
      this.dialogGoodsDetailVisible = true;
      await getGameGoodsDetailAdmin(goodsId).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.gameGoodsDetail = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    add() {
      this.resetAdd()
      this.dialogAddGoodsVisible = true;
    },

    async update(goodsId) {
      this.updateGameGoods = {}
      let that = this
      this.dialogUpdateGoodsVisible = true;
      await getGameGoodsDetailAdmin(goodsId).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.updateGameGoods = res.data;
            //that.tempUpdateGameGoods = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //删除标签
    handleTagClose(tag) {
      this.updateGameGoods.tag.splice(this.updateGameGoods.tag.indexOf(tag), 1);
    },

    handleTagCloseAdd(tag) {
      this.addGameGoods.tag.splice(this.addGameGoods.tag.indexOf(tag), 1);
    },

    showInputTag() {
      this.inputVisibleTag = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInputTag.$refs.input.focus();
      });
    },

    handleInputConfirmTagAdd() {
      let inputValueTag = this.inputValueTag;
      if (inputValueTag) {
        this.addGameGoods.tag.push(inputValueTag);
      }
      this.inputVisibleTag = false;
      this.inputValueTag = '';
    },

    //说明图片处理
    deletePicUrl(index) {
      this.updateGameGoods.picUrl.splice(this.updateGameGoods.tag[index], 1);
    },

    addPicUrl() {
      this.updateGameGoods.picUrl.push('');
    },

    deletePicUrlAdd(index) {
      this.addGameGoods.picUrl.splice(this.addGameGoods.tag[index], 1);
    },

    addPicUrlAdd() {
      this.addGameGoods.picUrl.push('');
    },

    async updateSubmit() {
      let that = this;
      let gameGoods = this.updateGameGoods;
      if (gameGoods.name == null || gameGoods.name == '') {
        this.$message.error("请输入商品名称~");
        return;
      }
      if (gameGoods.developCompany == null || gameGoods.developCompany == '') {
        this.$message.error("请输入开发商名称~");
        return;
      }
      if (gameGoods.price <= 0) {
        this.$message.error("请输入合法的价格~");
        return;
      }
      if (gameGoods.num < 0) {
        this.$message.error("请输入合法的库存~");
        return;
      }
      if (gameGoods.isEnabled == null) {
        this.$message.error("请输入上架状态~");
        return;
      }
      for (var i = 0; i < gameGoods.picUrl.length; i++) {
        if (gameGoods.picUrl[i] == null || gameGoods.picUrl[i] == '') {
          this.gameGoods.picUrl.splice(this.gameGoods.tag[i], 1);
        }
      }
      await updateGameGoods(gameGoods).then((res) => {
        if (res.code == "200") {
          that.dialogUpdateGoodsVisible = false;
          that.updateGameGoods = {};
          that.inputVisibleTag = false;
          that.inputValueTag = '';
          that.getGameGoodsList()
          this.$message.success('修改商品信息成功');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async addSubmit() {
      let that = this;
      let gameGoods = this.addGameGoods;
      if (gameGoods.name == null || gameGoods.name == '') {
        this.$message.error("请输入商品名称~");
        return;
      }
      if (gameGoods.developCompany == null || gameGoods.developCompany == '') {
        this.$message.error("请输入开发商名称~");
        return;
      }
      if (gameGoods.price <= 0) {
        this.$message.error("请输入合法的价格~");
        return;
      }
      if (gameGoods.num < 0) {
        this.$message.error("请输入合法的库存~");
        return;
      }
      if (gameGoods.isEnabled == null) {
        this.$message.error("请输入上架状态~");
        return;
      }
      for (var i = 0; i < gameGoods.picUrl.length; i++) {
        if (gameGoods.picUrl[i] == null || gameGoods.picUrl[i] == '') {
          this.gameGoods.picUrl.splice(this.gameGoods.tag[i], 1);
        }
      }
      await addGameGoods(gameGoods).then((res) => {
        if (res.code == "200") {
          that.dialogAddGoodsVisible = false;
          that.addGameGoods = {};
          that.inputVisibleTag = false;
          that.inputValueTag = '';
          that.getGameGoodsList()
          this.$message.success('添加商品成功');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    resetUpdate(goodsId) {
      this.update(goodsId)
      // 这个不能赋值，不知道为什么，会跟updateGameGoods值一样，以后再了解怎么回事，先调用接口覆盖
      //this.updateGameGoods = this.tempUpdateGameGoods
    },
    resetAdd() {
      this.addGameGoods = {
        "content": "",
        "developCompany": "",
        "isEnabled": true,
        "mainPicUrl": "",
        "name": "",
        "num": 0,
        "picUrl": [''],
        "price": "0",
        "tag": []
      }
    }
  },
  
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.el-input {
  width: 25%;
}

.game-list {
  width: 50%;
  margin-left: 25%;
}

.gameGoodsName {
  font-size: 25px;
  color: #2abaca;
  font-weight: bolder;
}

.old-name {
  color: #000;
}

.detailContent {
  font-size: 12px;
  line-height: 20px;
  display: block;
  color: #9497a0;
}

.detailContentPrice {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: red;
  font-weight: bold;
}

.detailContentNum {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: black;
  font-weight: bold;
}

.search {
  margin-left: 1000px
}

.onSale {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: green;
  font-weight: bold;
}

// .el-tag+.el-tag {
//   margin-left: 10px;
// }

// .button-new-tag {
//   margin-left: 10px;
//   height: 32px;
//   line-height: 30px;
//   padding-top: 0;
//   padding-bottom: 0;
// }

// .input-new-tag {
//   width: 90px;
//   margin-left: 10px;
//   vertical-align: bottom;
// }
</style>